<template>
  <nm-container>

    <el-form label-width="80px" :inline="true" style="background:white;padding-top:20px">
      <el-row id="ticketTop">
        <el-col :span="24">
          <div id="ticketTopTime">
            <span class="ticketTxt">{{form.busDate}}</span>
            <span class="ticketTxt">{{currentTime}}</span>
            <span class="ticketTxt">星期{{week}}</span>
          </div>
        </el-col>
      </el-row>
      <el-form-item label="标示" prop="route_name">
        <el-select class="ticketInput" v-model="form.flag" placeholder="请选择">
          <el-option label="正班检票" value="1">
          </el-option>
          <el-option label="当日补检" value="2">
          </el-option>
          <el-option label="隔日补检" value="3">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="" prop="isCancleTicket">
        <el-radio v-model="form.isCancleTicket" label="true">检票</el-radio>
        <el-radio v-model="form.isCancleTicket" label="false">废检</el-radio>
      </el-form-item>
      <!-- enter快捷键提交数据 -->
      <el-form-item label="班次" prop="route_name" style="margin-left:12px">
        <el-input class="ticketInput" @focus="selectTxt($event)" @keyup.enter.native="send(1)" v-model="form.busNo" clearable />
      </el-form-item>
      <!-- enter快捷键检票 -->
      <el-form-item label="票号" prop="route_name">
        <el-input ref="ticketNum" class="ticketInput" @focus="selectTxt($event)" v-model="form.ticketNo" @keyup.enter.native="send(2)" clearable />
      </el-form-item>
      <el-form-item label="打印张数" prop="PageNumber">
        <el-input class="ticketInput" @focus="selectTxt($event)" v-model="form.PageNumber" type="number" clearable />
      </el-form-item>
      <el-button type="primary" style="" @click="getPrintData">打 印</el-button>
      <el-button type="primary" style="" @click="ReadICCard">读 卡</el-button>
      <el-button type="primary" style="" @click="dialogVisible = true">座位号</el-button>
    </el-form>

    <el-table ref="topictable" :data="getListData" align="center" :header-cell-style="{ 'text-align': 'center', 'font-weight': 'bold', color: '#030202' }" :cell-style="{ 'text-align': 'center' }" style="width: 100%;margin-bottom: 2%;text-align: center;">
      <el-table-column prop="sheet_id" label="单据号"> </el-table-column>
      <el-table-column prop="bus_id" label="班次"> </el-table-column>
      <el-table-column prop="bus_start_time" label="时间"> </el-table-column>
      <el-table-column prop="endStopName" label="到站"> </el-table-column>
      <el-table-column prop="licensePlateNo" label="车牌号"> </el-table-column>
      <el-table-column prop="company" label="公司"> </el-table-column>
      <el-table-column prop="companyType" label="内外"> </el-table-column>
      <el-table-column prop="sold_seat" label="售票数"> </el-table-column>
      <el-table-column prop="check_quantity" label="检票数"> </el-table-column>
      <!-- <el-table-column prop="soldMoney" label="售票款"> </el-table-column> -->
      <el-table-column prop="remainMoney" label="结算款"> </el-table-column>
    </el-table>

    <el-table ref="topictable2" :max-height="tabheight" :data="checkstatisticsList" align="center" :header-cell-style="{ 'text-align': 'center', 'font-weight': 'bold', color: '#030202' }" :cell-style="{ 'text-align': 'center' }" style="float: left;width: 25%;display: inline-block;text-align: center;">
      <el-table-column prop="target" label="站点"> </el-table-column>
      <el-table-column prop="peopleNo" label="人数"> </el-table-column>
      <el-table-column prop="ticketPrice" label="金额"> </el-table-column>
    </el-table>

    <div>
      <el-table ref="topictable" :max-height="tabheight" :data="listMessage" align="center" :header-cell-style="{ 'text-align': 'center', 'font-weight': 'bold', color: '#030202' }" :cell-style="{ 'text-align': 'center' }" style="margin-left:1%;display: inline-block;width: 74%;text-align: center;">
        <el-table-column prop="busDate" label="日期">
          <template slot-scope="scope">
            <span>{{dateNew(scope.row.busDate)}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="paperTicketId" label="票号"> </el-table-column>
        <el-table-column prop="busId" label="班次"> </el-table-column>
        <el-table-column prop="bus_time" label="时间"> </el-table-column>
        <el-table-column prop="target" label="到站"> </el-table-column>
        <el-table-column prop="seatNo" label="座位号"> </el-table-column>
        <el-table-column prop="ticketPrice" label="票价"> </el-table-column>
        <el-table-column prop="remainPrice" label="结算价"> </el-table-column>
        <el-table-column prop="ticketType" label="类别"> </el-table-column>
        <el-table-column prop="sellStation" label="售出站"> </el-table-column>
      </el-table>
      <el-pagination style="text-align: right" @current-change="paginationChange" background layout="prev, pager, next" :total="listMessageTotal" />
    </div>

    <!-- <div id="seatBody" style="width: 70%;display: inline-block;"></div> -->

    <!-- <detail-list :show="show" v-if="show" @hide="isHide" /> -->
    <el-dialog title="座位信息" :visible.sync="dialogVisible" width="30%">
      <div id="noneDiv" v-if="seatList.length == 0">暂无信息</div>
      <div id="seatDiv">
        <p class="seatItem" v-for="(item, index) in seatList" :key="index" :class="`${item.status == 1 ? 'selectItem1': item.status == 2 ? 'selectItem2' : item.status == 3 ? 
        'selectItem3' : item.status == 4 ? 'selectItem4' : item.status == 5 ? 'selectItem5' : item.status == 6 ? 
        'selectItem6' : 'noItem'}`">
          {{item.seatNo}}
        </p>
      </div>

      <span slot="footer" class="dialog-footer">
        <div v-for="(item,index) in setaColor" :key="index" class="seatStatusColorDiv">
          <span class="seatStatusColor" :class="item"></span>
          <span class="seatStatusTxt">{{seatTxt[index]}}</span>
        </div>
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </nm-container>
</template>
<script>
import { mixins } from 'netmodular-ui'
import page from './page'
import cols from './cols'
import detailList from '../components/detailList'
import { getDateFun } from '../../utils/js/common'
import $ from '../../utils/jquery-3.5.1.min'

const api = $api.dispatch.route_Info

export default {
  name: page.name,
  mixins: [mixins.list],
  components: { detailList },
  data() {
    return {
      listMessageTotal: 1,
      dialogVisible: false,
      setaColor: ['selectItem1', 'selectItem2', 'selectItem3', 'selectItem4', 'selectItem5', 'selectItem6'],
      seatTxt: ['售', '废', '退', '改', '取', '检'],
      // status: 1：售2：废3：退4：改5：取6：检
      seatList: [],
      getListData: [],
      listMessage: [],
      checkstatisticsList: [],
      timer: '', //定时器的变量
      currentTime: '', // 获取当前时间
      // 星期
      week: '',
      // vehicleOption: [],
      radio: '1',
      form: {
        isCancleTicket: 'true',
        PageNumber: 1,
        ticketNo: '',
        busDate: getDateFun(),
        busNo: '',
        flag: '1',
        userId: localStorage.getItem('nm-accountId').replace('"', '').replace('"', ''),
        PageSize: 10,
        PageNum: 1,
        sheetId: '',
      },
      detail: '',
      show: false,
      getList: [
        {
          lineCode: '1',
        },
        {
          lineCode: '2',
        },
        {
          lineCode: '3',
        },
      ],
      list: {
        title: page.title,
        cols,
        model: {
          /** 线路名称 */
          route_name: '',
        },
      },
      buttons: page.buttons,
      tabheight: 400,
    }
  },
  mounted() {
    try {
      const that = this
      this.topTime()
      this.timer = setInterval(function () {
        that.topTime()
      }, 1000)
    } catch (err) {}
    this.$nextTick(() => {
      this.tabheight = window.innerHeight - this.$refs.topictable.$el.offsetTop - 150
      this.tabheight = window.innerHeight - this.$refs.topictable2.$el.offsetTop - 150
    })
  },
  methods: {
    // vehicleList() {
    //   busApi.vehicleQuery().then((res) => {
    //     var arr = res.rows.map((item) => {
    //       return { value: item.id, label: item.license_no }
    //     })
    //     this.vehicleOption = arr
    //   })
    // },
    paginationChange(val) {
      this.form.PageNum = val
      this.getcheckinfoList()
    },
    // input聚焦选中所有内容
    selectTxt(e) {
      e.currentTarget.select()
    },
    dateNew(n) {
      return getDateFun(n)
    },
    getPrintData() {
      api.booksheetprint(this.form).then((res) => {
        var l = res.records.map((s) => {
          return {
            Destination: s.destination,
            Price: s.price,
            FullPrice: s.fullPrice,
            DisabledArmymanTicket: s.disabledArmymanTicket,
            ChildTicket: s.childTicket,
            ConcessionTicket: s.concessionTicket,
            SaleStation: s.saleStation,
          }
        })
        res.records = l
        this.printForm(res)
      })
    },
    ReadICCard(res) {
      const that = this
      const i = res
      $.ajax({
        type: 'get',
        async: false,
        url: `http://localhost:5000/Card/ReadICCard`,
        dataType: 'jsonp',
        success: function (json) {
          if (json.Code != 1) {
            that.$message.error(json.Msg)
          } else {
            that.$refs.ticketNum.focus()
            that.form.busNo = json.Data.plateNumber
          }
        },
        error: function (e) {
          that.$message.warning('未开启读卡服务')
        },
      })
    },
    // 打印参数： 公司名称，条码，结算单号，始发站 ,发车时间，车次，终点站，车牌号，核定人数 ，公司，用户名，打印时间，金额，人数，大小写，类别，内外，打印张数，打印份
    printForm(res) {
      const that = this
      const i = res
      $.ajax({
        type: 'get',
        async: false,
        url: `http://localhost:5000/Print/PrintSettlement?CompanyName=${i.companyName}&BarCode=${i.barCode}&DocumentNo=${i.documentNo}&OriginatingStation=${i.originatingStation}
        &DepartureTime=${i.departureTime}&BusId=${i.busId}&Terminus=${i.terminus}&Vehicle=${i.vehicle}
        &RatedPassengerCapacity=${i.ratedPassengerCapacity}&Company=${i.company}&UserId=${that.form.userId}
        &PrintTime=${i.printTime}&Total=${i.total}&Amount=${i.amount}&AmountInWords=${i.amountInWords}&Category=${i.category}
        &Nw=${i.nw}&PageNumber=${that.form.PageNumber}&Records=${JSON.stringify(i.records)}`,
        dataType: 'jsonp',
        success: function (json) {
          if (json.Code != 1) {
            that.$message.error(json.Msg)
          }
        },
        error: function (e) {
          that.$message.warning('未开启打印服务')
        },
      })
    },
    topTime() {
      let data = new Date()
      let H = data.getHours()
      let Min = data.getMinutes()
      let S = data.getSeconds()
      this.currentTime = //修改数据date
        `${H < 10 ? '0' + H : H}` + `: ${Min < 10 ? '0' + Min : Min}` + `: ${S < 10 ? '0' + S : S}`
      let arr = ['日', '一', '二', '三', '四', '五', '六']
      this.week = arr[data.getDay()]
    },
    getTicketTop() {
      api.GetOneBookSheet(this.form).then((res) => {
        this.getListData = [res.bi]
        this.form.sheetId = res.bi.sheet_id
      })
    },
    send(t) {
      // 票号查询
      if (t == 2) {
        api.createcheckticketinfo(this.form).then((res) => {
          this.getcheckinfoList()
          this.getTicketTop()
          this.checkstatisticsGet()
          this.$message.success('检票成功')
        })
      } else {
        // 班次查询
        this.createbookingsheetList(t)
      }
    },
    // 插入生成结算单
    createbookingsheetList(t) {
      api.createbookingsheet(this.form).then((res) => {
        this.GetOneBookSheetList(t)
      })
    },
    // 查询单个的结算单
    GetOneBookSheetList(t) {
      api.GetOneBookSheet(this.form).then((res) => {
        this.getListData = [res.bi]
        this.form.sheetId = res.bi.sheet_id
        this.queryseatstatusList()
        this.checkstatisticsGet()
        if (t == 1) {
          this.getcheckinfoList()
        } else {
          this.createcheckticketinfoList()
        }
      })
    },
    // 插入结算单数据 - 后台需要，前端页面无逻辑操作 // 检票成功上方加一
    createcheckticketinfoList() {
      api.createcheckticketinfo(this.form).then((res) => {
        this.getcheckinfoList()
        this.$message.success('检票成功')
      })
    },
    // 检票统计查询
    checkstatisticsGet() {
      api.checkstatistics(this.form).then((res) => {
        console.log(res)
        this.checkstatisticsList = res
      })
    },
    // 生成检票记录，并返回检票信息
    getcheckinfoList() {
      api.getcheckinfo(this.form).then((res) => {
        this.listMessage = res.checks
        this.listMessageTotal = res.totalItems
      })
    },
    // 座位号查询
    queryseatstatusList() {
      api.queryseatstatus(this.form).then((res) => {
        this.seatList = res
      })
    },
    checkUp() {
      if (this.detail == '') {
        this.$message({
          message: '请选择一条班次',
          type: 'warning',
        })
      } else {
        this.show = true
      }
    },
    isHide() {
      this.show = false
    },
  },
}
</script>

<style scoped>
.ticketInput {
  width: 80%;
}
#seatBody {
  display: inline-block;
  height: 50%;
  background: white;
}
#ticketTopTime {
  padding-bottom: 20px;
}
.ticketTxt {
  margin-left: 40px;
}
#seatDiv {
  width: 80%;
  overflow: hidden;
  margin: 0 auto;
}
#noneDiv {
  height: 30px;
  text-align: center;
  font-size: 16px;
}
.seatItem {
  float: left;
  width: 40px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  margin: 2px;
  cursor: default;
  display: inline-block;
}
.selectItem1 {
  background: mediumturquoise;
}
.selectItem2 {
  background: palevioletred;
}
.selectItem3 {
  background: lightblue;
}
.selectItem4 {
  background: rgb(7, 199, 103);
}
.selectItem5 {
  background: rgb(206, 226, 29);
}
.selectItem6 {
  background: rgb(184, 160, 230);
}
.noItem {
  background: #4444;
}
.seatStatusColorDiv {
  float: left;
}
.seatStatusColor {
  display: inline-block;
  height: 15px;
  width: 15px;
}
.seatStatusTxt {
  display: inline-block;
  margin-right: 13px;
  position: relative;
  top: -2px;
}
</style>